<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>svg</title>
</head>
<body>
  <svg width="400" height="110">
    <rect width="300" height="100" fill="blue" stroke-width="3" stroke="black"/>
  </svg><br>

  <!-- fill-opacity,stroke-opacity可以分开写，也可以直接写opacity -->
  <svg width="400" height="180">
    <rect x="50" y="20" width="150" height="150" fill="blue" stroke="tomato" 
    stroke-width="5" fill-opacity="0.1" stroke-opacity="0.9" />
  </svg><br>

  <svg width="400" height="180">
    <rect x="50" y="20" width="150" height="150" fill="red" stroke="black" 
    stroke-width="5" opacity="0.5" rx="20" ry="20"/>
  </svg><br>

  <svg width="400" height="180">
    <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="yellow"
    opacity="0.5"/>
    <ellipse cx="250" cy="100" rx="100" ry="50" fill="yellow" opacity="0.1" stroke="red"
    stroke-width="5"/>
  </svg><br>

  <svg width="500" height="150">
    <ellipse cx="240" cy="100" rx="220" ry="30" fill="purple" />
    <ellipse cx="220" cy="70" rx="190" ry="20" fill="lime" />
    <ellipse cx="210" cy="45" rx="170" ry="15" fill="yellow" />
  </svg><br>

  <svg width="500" height="100">
    <ellipse cx="240" cy="50" rx="220" ry="30" fill="purple"/>
    <ellipse cx="220" cy="50" rx="190" ry="20" fill="white"/>
  </svg>

  <svg width="300" height="150">
    <line x1="0" y1="0" x2="200" y2="100" stroke="red" stroke-width="2"/>
  </svg>

  <svg width="300" height="210">
    <polygon points="200,20 250,190 160,200 100,100 20,20" fill="lime" stroke-width="2"
    stroke="purple"/>
  </svg>

  <svg width="500" height="210">
    <polygon points="100,10 40,198 198,78 10,78 160,198" fill="lime" stroke-width="2"
    stroke="purple"/>
    <polyline points="200,20 210,200 440,100" stroke="red" stroke-width="2" fill="none"/>
  </svg>

  <svg width="500" height="220">
    <text x="0" y="15" fill="red" transform="rotate(30 20,40)">我喜欢SVG</text>
  </svg>

  <svg width="200" height="200" xmlns:xlink="https://www.w3.org/1999/xlink">
    <text x="20" y="20" fill="red">
      Several lines
      <tspan x="10" y="45">First lines</tspan>
      <tspan x="10" y="75">Second lines</tspan>
    </text>
    <a xlink:href="./case_log.html" target="_black">
      <text x="10" y="100" fill="yellow">点我</text>
    </a>
  </svg>

  <svg width="500" height="400">
    <!-- 内部命令：大写：绝对定位（坐标原点),   小写：相对定位（相比较上一个绘制点的定位） -->
    <g fill="yellow">
      <path d="M0 0 L400 0 L0 20" stroke="red"/>
      <circle cx="100" cy="350" r="3"/>
      <circle cx="250" cy="50" r="3"/>
      <circle cx="400" cy="350" r="3"/>
    </g>
    <g font-size="30" fill="black" text-anchor="middle">
      <text x="100" y="350" dx="-20">A</text>
      <text x="250" y="50" dx="-20">B</text>
      <text x="400" y="350" dx="20">C</text>
    </g>
    <g fill="none">
      <path d="M100 350 l150 -300" stroke="black" stroke-width="10" stroke-dasharray="5,5"/>
      <path d="M250 50 l150 300" stroke="black"/>
      <path d="M175 200 l150 0" stroke="green"/>
      <path d="M100 350 q150 -300 300 0" stroke="purple"/>
    </g>
  </svg>

  <svg width="110" height="110">
    <defs>
      <filter x="0" y="0" id="f1">
        <feGaussianBlur stdDeviation="15"/>
      </filter>
    </defs>
    <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f1)"/>
  </svg>

  <svg width="110" height="110">
    <defs>
      <filter x="0" y="0" width="200" height="200" id="f2">
        <feOffset in="SourceAlpha" dx="20" dy="20"/>
        <feGaussianBlur stdDeviation="10"/>
        <feBlend in="SourceGraphic"/>
      </filter>
    </defs>
    <rect width="90" height="90" stroke="green" stroke-width="3" fill="yellow" filter="url(#f2)"/>
  </svg>

  <svg width="400" height="200">
    <defs>
      <linearGradient x1="0%" y1="0%" x2="100%" y2="0%" id="grad1">
        <stop offset="0%" stop-color="rgb(255,255,0)"/>
        <stop offset="100%" stop-color="rgb(255,0,0)"/>
      </linearGradient>
    </defs>
    <ellipse cx="200" cy="100" rx="100" ry="55" fill="url(#grad1)"/>
    <text fill="#ffffff" font-size="45" x="150" y="120">SVG</text>
  </svg>

  <svg width="400" height="200">
    <defs>
      <radialGradient cx="50%" cy="50%" r="50%" fx="50%" fy="50%" id="grad2">
        <stop offset="0%" stop-color="rgb(255,255,255)"/>
        <stop offset="100%" stop-color="rgb(0,0,255)"/>
      </radialGradient>
    </defs>
    <ellipse cx="200" cy="100" rx="100" ry="55" fill="url(#grad2)"/>
  </svg>

</body>
</html>